<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>mall</title>
  <style>
    html,
    body,
    ul,
    li,
    p {
      margin: 0;
      padding: 0;
    }

    html,
    body {
      width: 100%;
    }

    .clearfix::after {
      content: "";
      display: block;
      height: 0;
      clear: both;
    }

    .left {
      float: left;
    }

    .right {
      float: right;
    }

    ul {
      list-style: none;
    }

    .cate li {
      font-size: 14px;
      font-family: Roboto-Regular, Roboto;
      color: rgba(34, 34, 34, 1);
      line-height: 40px;
      border-bottom: 1px solid #e2e2e2;
    }

    .wrapper {
      width: 1080px;
      margin: 0 auto;
    }

    .topbar {
      height: 280px;
      background: rgba(247, 247, 247, 1);
      position: relative;
    }

    .top-skirt {
      margin: 50px 0 0 380px;
    }

    .login {
      display: none;
    }

    .title {
      font-size: 34px;
      font-family: Roboto-Medium, Roboto;
      font-weight: 500;
      color: rgba(33, 33, 33, 1);
      line-height: 40px;
      margin: 40px 0 16px 0;
    }

    .sub-title {
      font-size: 16px;
      font-family: Roboto-Regular, Roboto;
      font-weight: 400;
      color: rgba(119, 119, 119, 1);
      line-height: 24px;
      margin-bottom: 88px;
    }

    .side-bar {
      width: 179px;
      padding-right: 17px;
      height: 465px;
    }

    .filter p {
      font-size: 12px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: rgba(34, 34, 34, 1);
      line-height: 29px;
    }

    .filter p:first-child {
      font-size: 16px;
      font-family: Roboto-Bold, Roboto;
      font-weight: bold;
    }

    .cate {
      position: relative;
      padding-bottom: 53px;
    }

    .cate li div span:nth-of-type(2) {
      float: right;
    }

    .cate .down {
      transform: rotateZ(90deg);
    }

    .cate::after {
      content: "";
      width: 20px;
      height: 5px;
      background: rgba(216, 216, 216, 1);
      border-radius: 3px;
      position: absolute;
      left: 80px;
      bottom: 0;
    }

    .sub-cate {
      transition: height .3s ease;
      height: 62px;
      margin-left: 10px;
      overflow: hidden;
    }

    .sub-cate .sketch {
      height: 2px;
      background-color: rgba(0, 0, 0, 1);
      position: relative;
    }

    .sub-cate.show {
      height: 0;
    }

    .sketch::before,
    .sketch::after {
      content: "";
      display: inline-block;
      background-color: rgba(0, 0, 0, 1);
      width: 10px;
      height: 10px;
      border-radius: 5px;
      position: absolute;
      top: -5px;
    }

    .sketch::before {
      left: 0;
    }

    .sketch::after {
      right: 0;
    }

    .goods-list {
      padding-left: 220px;
    }

    .result {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      align-content: center;
      margin-top: 7rem;
    }

    .result div:first-child span {
      font-size: 14px;
      font-family: Roboto-Medium, Roboto;
      font-weight: 500;
      line-height: 16px;
      color: rgba(204, 204, 204, 1);
    }

    .result div:first-child span.current {
      color: rgba(34, 34, 34, 1);
    }

    .result div:first-child span:nth-child(2) {
      display: inline-block;
      width: 1px;
      height: 14px;
      background-color: #d8d8d8;
      margin: 0 5px;
      transform: scaleY(2.2);
    }

    .four-rectangle,
    .three-rectangle,
    .two-rectangle {
      margin: 0 8px;
      width: 20px;
      height: 20px;
      display: flex;
      justify-content: space-between;
    }

    .result .four-rectangle div {
      width: 3px;
      height: 20px;
      background-color: rgba(225, 225, 225, 1);
    }

    .result .three-rectangle div {
      width: 5px;
      height: 20px;
      background-color: rgba(0, 0, 0, 1);
    }

    .result .two-rectangle div {
      width: 8.5px;
      height: 20px;
      background-color: rgba(225, 225, 225, 1);
    }

    .result div:nth-child(3) select {
      width: 166px;
      height: 32px;
      font-size: 13px;
      font-family: Roboto-Regular, Roboto;
      color: rgba(119, 119, 119, 1);
      line-height: 15px;
    }

    .result .totle {
      font-size: 14px;
      font-family: Roboto-Regular, Roboto;
      color: rgba(34, 34, 34, 1);
      line-height: 16px;
      box-sizing: border-box;
    }

    .detail-list {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      flex-wrap: wrap;
      margin-top: 1rem;
    }

    .detail-item {
      margin: 16px 0;
      text-align: center;
      width: 270px;
    }

    .detail-item>img {
      width: 100%;
    }

    .detail-intro p:first-child {
      font-size: 13px;
      font-family: Tahoma;
      color: rgba(119, 119, 119, 1);
      line-height: 31px;
    }

    .detail-intro p:last-child {
      font-size: 15px;
      font-family: Tahoma;
    }

    .detail-intro p span:first-child {
      color: rgba(33, 33, 33, 1);
    }

    .detail-intro p span:last-child {
      color: rgba(119, 119, 119, 1);
    }

    .goodsSort {
      display: none;
    }

    /* iPad */
    @media screen and (max-width: 768px) {
      html {
        font-size: 10px;
      }

      .container {
        width: 100%;
      }

      .container .wrapper {
        padding: 3rem;
        width: 100%;
        box-sizing: border-box;
      }

      .topbar,
      .sub-title,
      .side-bar {
        display: none;
      }

      .columns .four-rectangle,
      .columns .three-rectangle,
      .columns .two-rectangle {
        display: none;
      }

      .goods-list {
        padding-left: 0;
      }

      .title {
        font-size: 3.4rem;
        line-height: 4.8rem;
      }

      .login {
        padding-top: 3rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .login img {
        width: 4rem;
      }

      .login .hamburger div {
        width: 4rem;
        height: 2px;
        background-color: #000;
      }

      .login .hamburger div:nth-child(2) {
        margin: 1.5rem 0;
      }

      .login p {
        width: 20rem;
        font-size: 4rem;
        font-family: Helvetica;
        color: rgba(0, 0, 0, 1);
        line-height: 24px;
        letter-spacing: 1px;
        flex: .7;
        text-align: center;
      }

      .result>div {
        width: 50%;
        box-sizing: border-box;
      }

      .result>div:first-child {
        padding-top: 1.1rem;
      }

      .result>div:nth-child(3),
      .result>div:last-child {
        border: 1px solid rgba(225, 225, 225, 1);
        margin-top: 6rem;
      }

      .result div:nth-child(3) select {
        height: 8rem;
        color: rgba(34, 34, 34, 1);
        font-size: 2.2rem;
        font-weight: 600;
        font-family: PingFangSC-Medium, PingFang SC;
        width: 70%;
        box-sizing: border-box;
        padding: 2rem 5rem;
        border: none;
      }

      .result .totle {
        font-size: 2.2rem;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 600;
        color: rgba(34, 34, 34, 1);
        line-height: 7.8rem;
        text-align: center;
      }

      .goods-list .result div span {
        width: 90px;
        font-size: 2rem;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        line-height: 26px;
        padding: 1.5rem 3rem;
        border: 1px solid rgba(225, 225, 225, 1);
      }

      .goods-list .result .current {
        border-color: rgba(0, 0, 0, 1);
        position: relative;
        z-index: 10;
      }

      .goods-list .result div span:nth-child(2) {
        display: none;
      }

      .goods-list .result span:last-child {
        margin-left: -4px;
      }

      .result .one-square {
        background-color: rgba(225, 225, 225, 1);
        margin-right: 5rem;
      }

      .result .four-square {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
      }

      .result .four-square div {
        width: 2.2rem;
        height: 2.2rem;
        background-color: rgba(0, 0, 0, 1);
      }

      .result .one-square,
      .result .four-square {
        width: 4.8rem;
        height: 4.8rem;
      }

      .detail-intro p:first-child {
        font-size: 2rem;
        font-family: PingFangSC-Regular, PingFang SC;
        color: rgba(102, 102, 102, 1);
        line-height: 5.2rem;
      }

      .detail-intro p:last-child {
        font-size: 3rem;
      }

      .detail-intro p:last-child span {
        display: inline-block;
        padding-left: 2.2rem;
      }

      li.detail-item {
        width: 48%;
      }

      .goodsSort {
        display: none;
      }
    }

    /* Phone */
    @media screen and (max-width: 576px) {
      html {
        font-size: 5px;
      }

      .columns .four-rectangle,
      .columns .three-rectangle,
      .columns .two-rectangle {
        display: none;
      }

      .one span {
        position: absolute;
        top: 0;
        right: 5px;
      }

      .one {
        border-bottom: 1px solid black;
        text-align: center;
        position: relative;
      }

      .other {
        border-bottom: 1px solid rgb(133, 133, 134);
        padding-left: 10px;
      }

      .goodsSort {
        transition: height .3s ease;
        overflow: hidden;
        height: 50%;
        margin-top: 91%;
      }

      .goodsSort li div {
        height: 9.6rem;
        font-size: 16px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: rgba(0, 0, 0, 1);
        line-height: 30px;
        letter-spacing: 1px;
      }

      .goodsSort .onshow {
        height: 0;
      }



     

      #show {
        width: 300px;
        height: 200px;
        display: none;
        padding: 1px;
        position: absolute;
        border: 1px solid #4c77aa;
        background: #f2f7fd;
        z-index: 11;
        zoom: 1;
      }

      #show h3 {
        background: #4c77aa;
        color: #fff;
        font-size: 14px;
        padding: 5px;
      }

      #show span {
        position: absolute;
        right: 3px;
        top: 3px;
        display: block;
        cursor: pointer;
        color: #fff;
        font-weight: bold;
      }

      #show p {
        padding: 5px;
      }

      #text {
        font-size: 12px;
        text-indent: 2em;
        line-height: 20px;
      }

      #bgbox {
        position: absolute;
        left: 0;
        top: 0;
        background: #000;
        filter: alpha(opacity=30);
        opacity: 0.3;
        z-index: 10
      }
    }
  </style>
</head>

<body>
  <!-- Outer container -->
  <div class="container">
    <!-- Type area -->
    <div class="wrapper">

      <!-- Topbar-banner -->
      <div class="topbar">
        <img src="imgs/topbar-skirt.png" class="top-skirt" alt="">
      </div>

      <div class="login">
        <div class="hamburger">
          <div></div>
          <div></div>
          <div></div>
        </div>
        <img src="imgs/search.png" alt="">
        <p>BELLERIS</p>
        <img src="imgs/personal.png" alt="">
        <img src="imgs/group.png" alt="">
      </div>

      <!-- Brief introduction -->
      <div>
        <div class="title">
          Men's Running Shoes
        </div>
        <div class="sub-title">
          Attack the pavement, trails or any route with men's running shoes equipped with the latest Nike footwear
          technologies. Featuring signature styles like the Nike Epic React, Zoom Fly and Pegasus, men's running shoes
          offer options for all runners and running styles.
        </div>
      </div>

      <!-- Mainbody -->
      <div class="mainbody clearfix">
        <div class="side-bar left">
          <div class="filter">
            <p>filter</p>
            <p>Category</p>
            <p>Men's Running shoes</p>
          </div>

          <ul class="cate">
            <li>
              <div>
                <span>Price</span>
                <span>></span>
              </div>
              <div class="sub-cate show">
                <span>$8.00</span>
                <span>$198.00</span>
                <div class="sketch"></div>
              </div>
            </li>
            <li>
              <div>
                <span>Product Type</span>
                <span>></span>
              </div>
              <div class="sub-cate show"></div>
            </li>
            <li>
              <div>
                <span>Colour</span>
                <span>></span>
              </div>
              <div class="sub-cate show"></div>
            </li>
            <li>
              <div>
                <span>Size</span>
                <span>></span>
              </div>
              <div class="sub-cate show"></div>
            </li>
            <li>
              <div>
                <span>Fit</span>
                <span>></span>
              </div>
              <div class="sub-cate show"></div>
            </li>
            <li>
              <div>
                <span>Brands</span>
                <span>></span>
              </div>
              <div class="sub-cate show"></div>
            </li>
          </ul>

        </div>

        <div class="goods-list">
          <div class="result">
            <div>
              <span class="current">Product</span>
              <span></span>
              <span>Scenes</span>
            </div>
            <div class="columns">
              <div class="four-rectangle left">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
              </div>
              <div class="three-rectangle left">
                <div></div>
                <div></div>
                <div></div>
              </div>
              <div class="two-rectangle left">
                <div></div>
                <div></div>
              </div>
              <div class="four-square right">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
              </div>
              <div class="one-square right"></div>
            </div>
            <div>
              <select name="" id="">
                <option value="">Best Match</option>
                <option value="">match</option>
              </select>
            </div>
            <div class="totle" οnclick="show(); return false">315 results</div>
          </div>

          <!-- Goods detail -->
          <div class="details">
            <ul class="detail-list">
              <li class="detail-item">
                <img src="imgs/product1.png" alt="">
                <div class="detail-intro">
                  <p>Bow Tie Front Stripe Slip Dress</p>
                  <p>
                    <span>$256</span>
                    <span>$667</span>
                  </p>
                </div>
              </li>
              <li class="detail-item">
                <img src="imgs/product2.png" alt="">
                <div class="detail-intro">
                  <p>Bow Tie Front Stripe Slip Dress</p>
                  <p>
                    <span>$256</span>
                    <span>$667</span>
                  </p>
                </div>
              </li>
              <li class="detail-item">
                <img src="imgs/product3.png" alt="">
                <div class="detail-intro">
                  <p>Bow Tie Front Stripe Slip Dress</p>
                  <p>
                    <span>$256</span>
                    <span>$667</span>
                  </p>
                </div>
              </li>
              <li class="detail-item">
                <img src="imgs/product4.png" alt="">
                <div class="detail-intro">
                  <p>Bow Tie Front Stripe Slip Dress</p>
                  <p>
                    <span>$256</span>
                    <span>$667</span>
                  </p>
                </div>
              </li>
              <li class="detail-item">
                <img src="imgs/product5.png" alt="">
                <div class="detail-intro">
                  <p>Bow Tie Front Stripe Slip Dress</p>
                  <p>
                    <span>$256</span>
                    <span>$667</span>
                  </p>
                </div>
              </li>
              <li class="detail-item">
                <img src="imgs/product6.png" alt="">
                <div class="detail-intro">
                  <p>Bow Tie Front Stripe Slip Dress</p>
                  <p>
                    <span>$256</span>
                    <span>$667</span>
                  </p>
                </div>
              </li>
              <li class="detail-item">
                <img src="imgs/product7.png" alt="">
                <div class="detail-intro">
                  <p>Bow Tie Front Stripe Slip Dress</p>
                  <p>
                    <span>$256</span>
                    <span>$667</span>
                  </p>
                </div>
              </li>
              <li class="detail-item">
                <img src="imgs/product8.png" alt="">
                <div class="detail-intro">
                  <p>Bow Tie Front Stripe Slip Dress</p>
                  <p>
                    <span>$256</span>
                    <span>$667</span>
                  </p>
                </div>
              </li>
              <li class="detail-item">
                <img src="imgs/product1.png" alt="">
                <div class="detail-intro">
                  <p>Bow Tie Front Stripe Slip Dress</p>
                  <p>
                    <span>$256</span>
                    <span>$667</span>
                  </p>
                </div>
              </li>
            </ul>
          </div>

        </div>
        <div class="goodsSort onshow">
          <ul>
            <li>
              <div class="one">
                <p>Sort</p><span>×</span>
              </div>
            </li>
            <li>
              <div class="other">
                <p>Best Match</p>
              </div>
            </li>
            <li>
              <div class="other">
                <p>Newest</p>
              </div>
            </li>
            <li>
              <div class="other">
                <p>Price-Low To Height</p>
              </div>
            </li>
            <li>
              <div class="other">
                <p>Price-Height To Low</p>
              </div>
            </li>
          </ul>
        </div>

      </div>
    </div>
  </div>


</body>
<script>
  window.onload = function () {

    // Filter    实现菜单收缩
    //querySelector和querySelectorAll都是W3C提供的新的查询接口
    var arrows = document.querySelectorAll(".cate li span:nth-of-type(2)");   //获取所有的箭头的集合
    var subCates = document.querySelectorAll(".sub-cate");   //这是点击箭头之后会出现的隐藏框
    arrows.forEach((v, i) => {              //遍历所有的箭头
      v.onclick = function () {
        v.style.transition = "transform .3s ease";
        // CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值...transition和transform结合，可以做出过渡转换效果。
        v.classList.toggle("down");          //down的样式是箭头旋转90°
        subCates[0].classList.toggle("show");
        subCates[i - 1].classList.toggle("show");
        subCates[0].classList.toggle("show");
      }
    })



    // Product or scenes
    //想要对哪些元素进行操作，一开始就要拿到哪些元素
    var product = document.querySelector(".result div span:first-child");//document.querySelector只返回匹配的第一个元素
    var scene = document.querySelector(".result div span:last-child");
    var imgs = document.querySelectorAll(".detail-item img");
    product.onclick = function () {
      this.classList.toggle("current");    //对product进行样式切换
      scene.classList.toggle("current");   //对scene进行样式切换
      imgs.forEach((v, i) => {
        console.log(i);
        v.src = `imgs/product${i + 1}.png`;    //${}:字符串模板
        console.log(i);
      })
    }

    scene.onclick = function () {
      this.classList.toggle("current");
      product.classList.toggle("current");
      imgs.forEach((v, i) => {
        console.log(i);
        v.src = `imgs/scene${i + 1}.png`;
        console.log(i);
      })
    }

    // pc端：Show style: four/three/ two columns
    var fourColumn = document.querySelector(" .four-rectangle");
    var threeColumn = document.querySelector(" .three-rectangle");
    var twoColunm = document.querySelector(".two-rectangle");
    var goodsItems = document.querySelectorAll("li.detail-item");

    window.onresize = function () {
      if (window.innerWidth >= 768) {
        goodsItems.forEach((v, i) => {
          v.style = "width: 270px";
        })
      } else {
        goodsItems.forEach((v, i) => {
          v.style.width = "48%";
        })
      }
    }

    fourColumn.onclick = function () {
      for (var i = 0; i < fourColumn.children.length; i++) {
        fourColumn.children[i].style.backgroundColor = "#000";
      }
      for (var i = 0; i < threeColumn.children.length; i++) {
        threeColumn.children[i].style.backgroundColor = "rgba(225, 225, 225, 1)";
      }
      for (var i = 0; i < twoColunm.children.length; i++) {
        twoColunm.children[i].style.backgroundColor = "rgba(225, 225, 225, 1)";
      }
      goodsItems.forEach((v, i) => {
        v.style.width = "23%";
      })
    }
    threeColumn.onclick = function () {
      for (var i = 0; i < threeColumn.children.length; i++) {
        threeColumn.children[i].style.backgroundColor = "#000";
      }
      for (var i = 0; i < fourColumn.children.length; i++) {
        fourColumn.children[i].style.backgroundColor = "rgba(225, 225, 225, 1)";
      }
      for (var i = 0; i < twoColunm.children.length; i++) {
        twoColunm.children[i].style.backgroundColor = "rgba(225, 225, 225, 1)";
      }
      goodsItems.forEach((v, i) => {
        v.style.width = "270px";
      })
    }
    twoColunm.onclick = function () {
      for (var i = 0; i < twoColunm.children.length; i++) {
        twoColunm.children[i].style.backgroundColor = "#000";
      }
      for (var i = 0; i < fourColumn.children.length; i++) {
        fourColumn.children[i].style.backgroundColor = "rgba(225, 225, 225, 1)";
      }
      for (var i = 0; i < threeColumn.children.length; i++) {
        threeColumn.children[i].style.backgroundColor = "rgba(225, 225, 225, 1)";
      }
      goodsItems.forEach((v, i) => {
        v.style.width = "45%";
      })
    }
    // 手机端：Show style: one / two columns
    var oneColumn = document.querySelector(".one-square");
    var twoColunms = document.querySelector(".four-square");
    var goodsItems = document.querySelectorAll("li.detail-item");

    //window.onresize监听div和屏幕的改变        onresize:当窗口大小发生改变
    window.onresize = function () {
      if (window.innerWidth >= 768) {
        //innerWidth>=768就是在电脑端显示
        goodsItems.forEach((v, i) => {
          v.style = "width: 270px";
        })
      } else {  //在ipad端和手机端显示
        goodsItems.forEach((v, i) => {
          v.style.width = "48%";
        })
      }
    }
    //一列状态和两列状态的切换
    oneColumn.onclick = function () {    //点击一个方块部分时
      this.style.backgroundColor = "#000";   //方块变成黑色
      // console.log(twoColunms.children);
      // console.log(twoColunms.children.length)
      for (var i = 0; i < twoColunms.children.length; i++) {
        twoColunms.children[i].style.backgroundColor = "rgba(225, 225, 225, 1)";      //四方块部分变成灰色
      }

      goodsItems.forEach((v, i) => {
        v.style.width = "100%";
      })

    }

    twoColunms.onclick = function () {
      for (var i = 0; i < twoColunms.children.length; i++) {
        twoColunms.children[i].style.backgroundColor = "rgba(0, 0, 0, 1)";
      }
      oneColumn.style.backgroundColor = "rgba(225, 225, 225, 1)";
      goodsItems.forEach((v, i) => {
        v.style.width = "48%";
      })
    }


    // 点击“315result”，底部弹出选择框
    // var total = document.querySelector(".totle");
    // var goodsSort = document.querySelector(".goodsSort")
    // total.onclick = function () {
    //  // console.log("20");
    //  goodsSort.style.transition = "transform .3s ease";
    //   goodsSort.classList.toggle("onshow")

    function show() {
      var iWidth = document.documentElement.clientWidth;
      var iHeight = document.documentElement.clientHeight;
      var bgObj = document.createElement_x("div");
      bgObj.setAttribute("id", "bgbox");
      bgObj.style.width = iWidth + "px";
      bgObj.style.height = Math.max(document.body.clientHeight, iHeight) + "px";
      document.body.appendChild(bgObj);
      var oShow = document.getElementByIdx_x('show');
      oShow.style.display = 'block';
      oShow.style.left = (iWidth - 302) / 2 + "px";
      oShow.style.top = (iHeight - 202) / 2 + "px";
      function oClose() {
        oShow.style.display = 'none';
        document.body.removeChild(bgObj);
      }
      var oClosebtn = document.createElement_x("span");
      oClosebtn.innerHTML = "×";
      oShow.appendChild(oClosebtn);
      oClosebtn.onclick = oClose;
      bgObj.onclick = oClose;
    }












  }
  }




</script>

</html>